import Login from "./login.js";

let {form,$,layer} = layui;
export default class Reg{
    constructor(){
        this.render();
        this.handle();
    }
    render(){
        let template = `
        <!DOCTYPE html>
        <html lang="en">
            <head>
                <style>
                    body{
                        background-color: #ccc;
                    }
                    .card{
                        width: 500px;
                        height:300px;
                        margin:auto;
                    }
                </style>
            </head>
            <body>
                <div class="layui-card card">
                    <div class="layui-card-header">注册</div>
                    <div class="layui-card-body">
                        <form class="layui-form" lay-filter="regForm" action="">
                            <div class="layui-form-item">
                                <label class="layui-form-label">用户名</label>
                                <div class="layui-input-block">
                                    <input
                                        type="text"
                                        name="username"
                                        required
                                        lay-verify="required|username"
                                        placeholder="请输入用户名"
                                        autocomplete="off"
                                        class="layui-input"
                                    />
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">密码框</label>
                                <div class="layui-input-block">
                                    <input
                                        type="password"
                                        name="pwd"
                                        required
                                        lay-verify="required|pwd"
                                        placeholder="请输入密码"
                                        autocomplete="off"
                                        class="layui-input"
                                    />
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">确认密码</label>
                                <div class="layui-input-block">
                                    <input
                                        type="password"
                                        name="confirm"
                                        required
                                        lay-verify="required"
                                        placeholder="请输入确认密码"
                                        autocomplete="off"
                                        class="layui-input"
                                    />
                                </div>
                            </div>
        
                            <div class="layui-form-item">
                                <div class="layui-input-block">
                                    <button
                                        class="layui-btn"
                                        lay-submit
                                        lay-filter="regSubmit"
                                    >
                                        立即提交
                                    </button>
                                    <button
                                        type="reset"
                                        class="layui-btn layui-btn-primary"
                                    >
                                        重置
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </body>
        </html>
        `;
        $("#root").html(template);
    }
    handle(){
        form.verify({
            username:function(value,item){
                if(!/^\w{6,20}$/.test(value)){
                    return "用户名输入有误"
                }
                
                let str;
                $.ajax({
                    type:"post",
                    url:"/users/usernameExist",
                    async:false,
                    data:{
                        username:value
                    },
                    success(res){
                        if(res.status == 0){
                            str = "用户名已存在";
                        }
                    }
                });
                return str;
                
        
            },
            pwd:[/^.{6,}$/,"密码格式不正确"]
        });
        form.on("submit(regSubmit)",function(data){
            console.log(data.field);
            console.log(form.val("regForm"));
            $.ajax({
                type:"post",
                url:"/users/reg",
                data:data.field,
                success(res){
                    console.log(res);
                    layer.alert("注册成功",function(){
                        // location.href = "login.html";
                        new Login();
                        layer.closeAll();
                    });
                }
            });
            return false;
        });
    }
}